<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <script type="text/javascript">
        var numresult;
        var str;
        var Str;
        var num1;
        var num2;
        function onclicknum(nums){
            str = document.getElementById("nummessage");
            str.value = str.value + nums;
        }
        function onclickclear(){
            str = document.getElementById("nummessage");
            str.value = "";
        }
        function onclickcal(string){
            switch(string){
                case 1:Str = 1;break;
                case 2:Str = 2;break;
                case 3:Str = 3;break;
                case 4:Str = 4;break;
            }
            str = document.getElementById("nummessage");
            num1 = str.value;
            str.value = "";
        }
        function onclickresult(){
            num2 = str.value;
            if(Str == 1){
                numresult = Number(num1) + Number(num2);
            }
            else if(Str == 2){
                numresult = Number(num1) - Number(num2);
            }
            else if(Str == 3){
                numresult = Number(num1) * Number(num2);
            }
            else{
                numresult = Number(num1) / Number(num2);
            }
            str = document.getElementById("nummessage")
            str.value = String(numresult);
        }
    </script>
</head>

<input type="text" id="nummessage"
        style="height: 90px; width: 381px; font-size: 50px" />
<br />
<input type="button" value="1" id="1"
       onclick="onclicknum(1)"
        style="height: 70px; width: 90px; font-size: 35px">
<input type="button" value="2" id="2"
       onclick="onclicknum(2)"
       style="height: 70px; width: 90px; font-size: 35px">
<input type="button" value="3" id="3"
       onclick="onclicknum(3)"
       style="height: 70px; width: 90px; font-size: 35px">
<input type="button" value="+" id="+"
       onclick="onclickcal(1)"
       style="height: 70px; width: 90px; font-size: 35px">
<br />
<input type="button" value="4" id="4"
       onclick="onclicknum(4)"
       style="height: 70px; width: 90px; font-size: 35px">
<input type="button" value="5" id="5"
       onclick="onclicknum(5)"
       style="height: 70px; width: 90px; font-size: 35px">
<input type="button" value="6" id="6"
       onclick="onclicknum(6)"
       style="height: 70px; width: 90px; font-size: 35px">
<input type="button" value="-" id="1"
       onclick="onclickcal(2)"
       style="height: 70px; width: 90px; font-size: 35px">
<br />
<input type="button" value="7" id="7"
       onclick="onclicknum(7)"
       style="height: 70px; width: 90px; font-size: 35px">
<input type="button" value="8" id="8"
       onclick="onclicknum(8)"
       style="height: 70px; width: 90px; font-size: 35px">
<input type="button" value="9" id="9"
       onclick="onclicknum(9)"
       style="height: 70px; width: 90px; font-size: 35px">
<input type="button" value="*" id="*"
       onclick="onclickcal(3)"
       style="height: 70px; width: 90px; font-size: 35px">
<br />
<input type="button" value="0" id="0"
       onclick="onclicknum(0)"
       style="height: 70px; width: 188px; font-size: 35px">
<input type="button" value="." id="."
       onclick="onclicknum(.)"
       style="height: 70px; width: 90px; font-size: 35px">
<input type="button" value="/" id="/"
       onclick="onclickcal(4)"
       style="height: 70px; width: 90px; font-size: 35px">
<br />
<input type="button" value="C" id="C"
       onclick="onclickclear()"
       style="height: 70px; width: 188px; font-size: 35px">
<input type="button" value="=" id="="
       onclick="onclickresult()"
       style="height: 70px; width: 188px; font-size: 35px">
</body>
</html>